<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为 UTF-8 -->
    <title>2*num+1 计算</title> <!-- 页面标题 -->
</head>
<body>
<!-- 输入框，用户输入数字 -->
<input id="numInput" placeholder="输入数字"/>
<!-- 按钮，点击发送请求 -->
<button id="calcBtn">计算</button>
<!-- 显示结果区域 -->
<div id="result"></div>

<script>
    // 获取元素引用
    const input = document.getElementById('numInput');
    const btn = document.getElementById('calcBtn');
    const result = document.getElementById('result');

    // 按钮点击事件
    btn.onclick = () => {
        // 拼接并发送 GET 请求
        fetch('/api/calc?num=' + encodeURIComponent(input.value))
            .then(res => res.json())      // 解析 JSON
            .then(data => {
                // 显示计算结果或错误
                if (data.error) {
                    result.textContent = data.error;
                } else {
                    result.textContent = '输入: ' + data.input + '，结果: ' + data.result;
                }
            })
            .catch(err => {
                // 捕获网络或解析错误
                result.textContent = '请求失败';
            });
    };
</script>
</body>
</html>